<template>
  <div class="container">
    <a-tabs class="setting-tab">
      <a-tab-pane key="role" tab="角色设置">
        <a-button @click="showDialog = true" type="primary" style="margin-bottom: 16px"
          >新增角色</a-button
        >
        <a-table
          :columns="columns"
          :dataSource="list"
          :pagination="{
            current: pageParams.page,
            pageSize: pageParams.pagesize,
            total: pageParams.total,
            onChange: changePage
          }"
        >
          <template #bodyCell="{ column, record }">
            <a-space v-if="column.dataIndex === 'operate'">
              <a-button type="primary" @click="editDetailRole(record.id)">编辑</a-button>
              <a-button type="danger" @click="delRow(record.id)">删除</a-button>
            </a-space>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="setting" tab="公司设置" force-render> </a-tab-pane>
    </a-tabs>
  </div>
  <a-modal @ok="btnOK" @cancel="btnCancel" :title="showTitle" v-model:visible="showDialog">
    <a-form>
      <a-form-item v-bind="form.validateInfos.name">
        <a-input v-model:value="formData.name" placeholder="请输入角色名称"></a-input>
      </a-form-item>
      <a-form-item v-bind="form.validateInfos.description">
        <a-input v-model:value="formData.description" placeholder="请输入角色描述"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { getRoleList, addRole, getRoleDetail, updateRole, delRole } from '@/api/setting'
import { Form, message, Modal } from 'ant-design-vue'
const columns = [
  {
    title: '序号',
    customRender: ({ index }) => {
      return index + 1 + (pageParams.page - 1) * pageParams.pagesize
    }
  },
  { title: '角色名称', dataIndex: 'name' },
  { title: '描述', dataIndex: 'description' },
  { title: '操作', dataIndex: 'operate' }
]

const list = ref([])
const pageParams = reactive({
  page: 1,
  pagesize: 5,
  total: 0
})
const showDialog = ref(false)
const formData = reactive({ name: '', description: '' })
const rules = reactive({
  name: [{ required: true, message: '请输入角色名称' }],
  description: [{ required: true, message: '请输入角色描述' }]
})
const form = Form.useForm(formData, rules)

onMounted(() => {
  getList()
})
const getList = async () => {
  const { rows, total } = await getRoleList(pageParams)
  list.value = rows
  pageParams.total = total
}
const changePage = (page, pagesize) => {
  pageParams.page = page
  pageParams.pagesize = pagesize
  getList()
}
const btnOK = async () => {
  try {
    await form.validate()
    formData.id ? await updateRole(formData) : await addRole(formData)
    message.success(`新增角色成功`)
    btnCancel()
    getList()
  } catch (error) {
    console.log(error)
  }
}
const btnCancel = () => {
  formData.id = null
  form.resetFields()
  showDialog.value = false
}

const editDetailRole = async (id) => {
  showDialog.value = true
  const { name, description } = await getRoleDetail(id)
  formData.id = id
  formData.name = name
  formData.description = description
}
const showTitle = computed(() => (formData.id ? '更新角色' : '新增角色'))

// 删除角色
const delRow = (id) => {
  Modal.confirm({
    content: '确定删除该角色吗',
    onOk: async () => {
      await delRole(id)
      if (list.value.length === 1) pageParams.page--
      getList()
    }
  })
}
</script>
<style lang="less" scoped>
.container {
  padding: 16px;
  .setting-tab {
    background-color: #fff;
    padding: 16px;
    height: calc(100vh - 93px);
  }
}
</style>
